<template>
    <div class="main">

        <!--顶栏-->
        <el-row>
            <el-col :span="24" class="title_area">
                <h4>商品管理</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <!--搜索栏-->
        <div class="search_panel">
            <el-row>
                <el-col :span="4" class="jiange">
                    <el-input v-model="name" placeholder="名称"></el-input>
                </el-col>
                <el-col :span="4" class="jiange">
                    <el-select v-model="type" style="width: 100%" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" class="jiange">
                    <el-input type="number" v-model="start" placeholder="下限"></el-input>
                </el-col>
                <el-col :span="4" class="jiange">
                    <el-input type="number" v-model="end" placeholder="上限"></el-input>
                </el-col>
                <el-col :span="4" class="jiangebutton">
                    <el-button type="primary"  class="btn_login" @click="productList"><i class="el-icon-search"></i>查询</el-button>
                </el-col>
                <el-col :span="4" class="jiangebutton">
                    <el-button type="primary"  class="btn_login" @click="createProduct">添加商品</el-button>
                </el-col>
            </el-row>
        </div>

        <!--列表-->
        <el-table :data="tableData"  border style="width: 100%;margin-top: 20px">
            <el-table-column label="商品图" class="commodityImg"  width="100">
                <template scope="scope">
                    <img :src="scope.row.img" class="commodityimage" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column prop="discount" label="折扣价"></el-table-column>
            <el-table-column prop="sale_count" label="销售数量"></el-table-column>
            <el-table-column prop="zan_number" label="点赞数"></el-table-column>
            <el-table-column prop="category.name" label="所属分类"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column  label="操作" width="280">
                <template scope="scope">
                    <el-button  type="success" size="small" @click="productDetial(scope.$index,tableData)">商品详情</el-button>
                    <el-button  type="warning" size="small" @click="productEdit(scope.$index,tableData)">修改</el-button>
                    <el-button  type="danger" size="small" @click="deleteProduct(scope.$index,tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination class="pagination"
                v-if="pagination.total>pagination.per_page"
                @current-change="productList"
                background
                layout="prev, pager, next"
                page-size="20"
                :total="pagination.total_pages">
        </el-pagination>
    </div>
</template>
<script>

  export default {
    data() {
      return {
        options: [{
          value: '',
          label: '全部'
        },{
          value: 'sale_count',
          label: '销量'
        }, {
          value: 'discount',
          label: '折扣价'
        }, {
          value: 'price',
          label: '价格'
        }, {
          value: 'zan_number',
          label: '点赞数'
        }],
        prop: '',
        className:'right',
        tableData:[],
        name: '',
        type: '',
        start: '',
        end: '',
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        total_pages: 100
      }
    },
    components: {

    },

    created() {
      this.productList(1)
    },

    methods: {

      shelfeBook(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }
        this.$store.dispatch('shelfBook', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '书籍上架成功',
              type: 'success'
            });
            this.bookList()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })

      },

      productDetial(index, table) {
        var id = table[index].id
        this.$router.push({name: 'productDetail', params: {id: id}})
      },

      productEdit(index, table) {
        var id = table[index].id
        this.$router.push({name: 'productEdit', params: {id: id}})
      },

      relationBookBookCategory(index, table) {
        var id = table[index].id
        this.$router.push({name: 'addBookBookCategory', params: {id: id}})
      },

      deleteProduct(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }

        this.$confirm('此操作将删除此商品，是否继续','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('productDelete', params).then(ret => {
            if(ret.success) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              this.productList()
            }else{
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      changeRight(value) {
        this.className = value
      },

      productList(page) {
        let params = {
          page: page,
          name: this.name,
          type: this.type,
          start: this.start,
          end: this.end,
        }

        this.$store.dispatch('productList', params).then((ret) => {
          this.tableData = ret.data.products.data
          this.pagination.pagination  = ret.data.products.meta.pagination
        })

      },

      createProduct() {
        this.$router.push({ name: "createProduct" });
      }
    }
  }
</script>
<style scoped>
    .header { background: #f2f2f2; }
    .jiangebutton{
      width: 6% !important;
      margin-right: 20px;
    }
    .commodityimage{
      width:70px;
      height:70px;
      margin-top: 5rpx;
    }
    .cell{
      width: 100px;
      margin: 0;
    }
    .el-table_1_column_5 div{
      width: 100px !important;
    }
    .butCon  .cell{
      display: flex;align-items: center;justify-content: center;
    }
    .el-table__body td:nth-child(2) div{
      width: 100px;
      background-color: #000;
      text-align: center;
    }
</style>
